<template>
	<view class="container">
		<!-- 顶部状态栏 -->
		<view class="status-bar" :class="'status-' + orderDetail.status">
			<view class="status-tag" >
				{{ statusText }}
			</view>
			<view class="order-id">订单号：{{ orderDetail.order_id }}</view>
			<view class="create-date">创建时间：{{ orderDetail.create_date }}</view>
		</view>

		<!-- 商品信息卡片 -->
		<view class="card">
			<view class="card-header">
				<uni-icons type="shop" size="18" color="#4a6cf7" class="icon"></uni-icons>
				<text class="card-title">商品信息</text>
			</view>
			<view class="card-body">
				<view class="goods-info">
					<image class="goods-image" :src="orderDetail.goods.thumb || thumb" mode="aspectFill"></image>
					<view class="goods-details">
						<view class="goods-name">名称：{{ orderDetail.goods.name }}</view>
						<view class="goods-meta">
							<view class="meta-item">品牌：{{ orderDetail.goods.brand }}</view>
							<view class="meta-item">型号：{{ orderDetail.goods.model }}</view>
							<view class="meta-item">领用数量：{{ orderDetail.goods._cartNumber }}</view>
						</view>
						<view class="goods-desc">描述：{{ orderDetail.goods.desc }}</view>
						<view class="inventory">
							<text class="inventory-label">库存剩余</text>
							<text class="inventory-value">{{ orderDetail.goods.remain_count }}件</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单信息卡片 -->
		<view class="card">
			<view class="card-header">
				<uni-icons type="list" size="18" color="#4a6cf7" class="icon"></uni-icons>
				<text class="card-title">订单信息</text>
			</view>
			<view class="card-body">
				<view class="info-row">
					<view class="info-label">订单ID</view>
					<view class="info-value">{{ orderDetail.order_id }}</view>
				</view>
				<view class="info-row">
					<view class="info-label">创建时间</view>
					<view class="info-value">{{ orderDetail.create_date }}</view>
				</view>
				<view class="info-row">
					<view class="info-label">订单状态</view>
					<view class="info-value">
						<text class="status-badge" :class="'status-' + orderDetail.status">{{ statusText }}</text>
					</view>
				</view>
				<view class="info-row" >
					<view class="info-label">驳回原因</view>
					<view class="info-value">{{ orderDetail.refuse }}</view>
				</view>
				<view class="info-row" >
					<view class="info-label">审核备注</view>
					<view class="info-value">{{ orderDetail.note }}</view>
				</view>
				<!-- <view class="info-row">
					<view class="info-label">类目ID</view>
					<view class="info-value">{{ orderDetail.goods.category_id }}</view>
				</view> -->
			</view>
		</view>

		<!-- 用户信息卡片 -->
		<view class="card">
			<view class="card-header">
				<uni-icons type="person" size="18" color="#4a6cf7" class="icon"></uni-icons>
				<text class="card-title">用户信息</text>
			</view>
			<view class="card-body">
				<view class="info-row">
					<view class="info-label">用户ID</view>
					<view class="info-value">{{ orderDetail.user_id }}</view>
				</view>
				<view class="info-row">
					<view class="info-label">用户名</view>
					<view class="info-value">{{ orderDetail.user_name }}</view>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<!-- <view class="action-bar">
			<button class="btn btn-outline" @click="printRecord">打印记录</button>
			<button class="btn btn-primary" @click="handleOrder">处理领用</button>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				thumb:'/static/avatar/empty.png',
				orderDetail: {
					order_id: "",
					create_date: "",
					user_id: "",
					user_name: "",
					goods: {
						_id: "",
						goods_id: "",
						category_id: "",
						name: "",
						brand: "",
						model: "",
						remain_count: 0,
						desc: "",
						thumb: "",
						is_on_sale: true,
						add_date: 0,
						last_modify_date: 0,
						note: "0",
						status: 0,
						_cartNumber: 0
					},
					status: 0
				}
			};
		},
		computed: {
			// 新增状态栏样式计算属性
			statusBarStyle() {
				const statusColors = {
					// 修改为蓝色渐变方案
					0: {
						start: '#4a6cf7',
						end: '#6b8cff'
					}, // 待处理：项目主蓝渐变
					1: {
						start: '#34c759',
						end: '#6dd400'
					}, // 已领取：绿色
					2: {
						start: '#ff3b30',
						end: '#ff625a'
					}, // 已拒绝：红色
					3: {
						start: '#8e8e93',
						end: '#aeaeb2'
					} // 已取消：灰色
				}

				const color = statusColors[this.orderDetail.status] || statusColors[0]
				return {
					background: `linear-gradient(135deg, ${color.start}, ${color.end})`
				}
			},
			statusText() {
				const statusMap = {
					0: "待处理",
					1: "已领取",
					2: "已驳回",
					3: "已取消"
				};
				return statusMap[this.orderDetail.status] || "未知状态";
			}
		},
		onReady() {
			this._id = uni.$router.params._id
			this.getGoodsRecordById(uni.$router.params._id)
		},
		methods: {
			async getGoodsRecordById(_id) {
				if (!_id) return;

				try {
					const obj = uniCloud.importObject('goods');
					const res = await obj.getGoodsRecordById({
						_id
					}); // 添加await

					if (res.code === 0) {
						// 确保数据结构完整性
						this.orderDetail = {
							...res.data,
							goods: res.data.goods || {} // 防止goods为空
						};
					} else {
						uni.showToast({
							title: res.message || '数据加载失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('请求失败:', error);
					uni.showToast({
						title: '请求服务异常',
						icon: 'none'
					});
				}
			}

			// printRecord() {
			// 	uni.showToast({
			// 		title: "打印功能准备中",
			// 		icon: "none"
			// 	});
			// },
			// handleOrder() {
			// 	uni.showModal({
			// 		title: "处理领用",
			// 		content: "确定要处理这条领用记录吗？",
			// 		success: (res) => {
			// 			if (res.confirm) {
			// 				uni.showToast({
			// 					title: "处理成功",
			// 					icon: "success"
			// 				});
			// 				// 在实际项目中，这里会调用云函数更新订单状态
			// 			}
			// 		}
			// 	});
			// }
		}
	};
</script>

<style lang="scss">
	$primary-color: #4a6cf7;
	$border-color: #e0e0e0;
	$bg-color: #f5f7fa;
	$text-color: #333;
	$text-secondary: #666;

	.container {
		background-color: $bg-color;
		min-height: 100vh;
		padding: 16px;
		padding-bottom: 100px;
	}

	.status-bar {
		// background: linear-gradient(135deg, $primary-color, #6b8cff);
		transition: background 0.3s ease;
		/* 添加颜色过渡动画 */
		border-radius: 12px;
		padding: 25px 20px;
		color: #fff;
		text-align: center;
		margin-bottom: 20px;
		box-shadow: 0 4px 12px rgba(74, 108, 247, 0.2);
		
		// 待审核
		&.status-0 {
			background: linear-gradient(135deg, #4facfe, #00f2fe);
		}
		
		// 已批准
		&.status-1 {
			background: linear-gradient(135deg, #43e97b, #38f9d7);
		}
		
		// 已完成
		&.status-2 {
			background: linear-gradient(135deg, #fa709a, #fee140);
		}
		
		// 已驳回
		&.status-3 {
			background: linear-gradient(135deg, #d3d3d3, #a9a9a9);
		}
	}

	.status-tag {
		display: inline-block;
		background: rgba(255, 255, 255, 0.15); // 提高透明度增强对比
		color: #fff; // 白色文字更清晰
		padding: 6px 16px;
		border-radius: 20px;
		font-size: 14px;
		margin-bottom: 15px;
	}

	.order-id {
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 8px;
		letter-spacing: 0.5px;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.create-date {
		opacity: 0.9;
		font-size: 14px;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	}

	.card {
		background: #fff;
		border-radius: 12px;
		overflow: hidden;
		margin-bottom: 20px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	}

	.card-header {
		padding: 16px 20px;
		border-bottom: 1px solid #f0f0f0;
		display: flex;
		align-items: center;
	}

	.card-title {
		font-size: 18px;
		font-weight: 600;
		margin-left: 8px;
	}

	.card-body {
		padding: 20px;
	}

	.goods-info {
		display: flex;
	}

	.goods-image {
		width: 100px;
		height: 100px;
		border-radius: 8px;
		margin-right: 16px;
		flex-shrink: 0;
		background: #f5f7fa;
	}

	.goods-details {
		flex: 1;
	}

	.goods-name {
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 8px;
		color: $text-color;
	}

	.goods-meta {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 8px;
	}

	.meta-item {
		background: #f0f5ff;
		color: $primary-color;
		padding: 4px 10px;
		border-radius: 4px;
		font-size: 12px;
		margin-right: 8px;
		margin-bottom: 8px;
	}

	.goods-desc {
		color: $text-secondary;
		font-size: 14px;
		margin-bottom: 12px;
	}

	.inventory {
		display: flex;
		justify-content: space-between;
		background: #f9fafc;
		padding: 10px 12px;
		border-radius: 8px;
		font-size: 14px;
	}

	.inventory-label {
		color: $text-secondary;
	}

	.inventory-value {
		font-weight: 500;
		color: $text-color;
	}

	.info-row {
		display: flex;
		margin-bottom: 15px;
		padding-bottom: 15px;
		border-bottom: 1px solid #f0f0f0;

		&:last-child {
			margin-bottom: 0;
			padding-bottom: 0;
			border-bottom: none;
		}
	}

	.info-label {
		width: 100px;
		color: $text-secondary;
		font-size: 14px;
	}

	.info-value {
		flex: 1;
		font-weight: 500;
		color: $text-color;
	}

	.status-badge {
		display: inline-block;
		padding: 4px 12px;
		border-radius: 20px;
		font-size: 13px;
		font-weight: 500;

		&.status-0 {
			background: #fff8e6;
			color: #faad14;
		}

		&.status-1 {
			background: #f6ffed;
			color: #52c41a;
		}

		&.status-2 {
			background: #fff2f0;
			color: #ff4d4f;
		}
		
		&.status-3 {
			background: #d3d3d3;
			color: #a9a9a9;
		}
	}

	.action-bar {
		display: flex;
		justify-content: space-between;
		padding: 20px;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		border-top: 1px solid #f0f0f0;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
	}

	.btn {
		padding: 12px 24px;
		border-radius: 8px;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.3s;
		font-size: 15px;
		flex: 1;
		margin: 0 10px;

		&-primary {
			background: $primary-color;
			color: white;
			border: none;
		}

		&-outline {
			background: transparent;
			border: 1px solid $primary-color;
			color: $primary-color;
		}

		&:active {
			opacity: 0.8;
			transform: scale(0.98);
		}
	}

	@media (max-width: 600px) {
		.goods-info {
			flex-direction: column;
		}

		.goods-image {
			width: 100%;
			height: 180px;
			margin-right: 0;
			margin-bottom: 16px;
		}

		.action-bar {
			flex-direction: row;
			gap: 12px;
		}

		.btn {
			width: 100%;
		}
	}
</style>